import { Form, Input, Button, message, Tabs, Select } from 'antd';
import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { queryRule, updateRule } from './service';
import { deleteNullOrUndefinedField, fenToYuan } from '@/utils/utils';
import { SHOP_TYPE } from '@/common/constants';

const { Option } = Select;

const { TabPane } = Tabs;

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 10 },
};

interface ConfigData {
  detail: any;
}

const initState: ConfigData = {
  detail: {},
};

const ConfigSite = () => {
  const [form] = Form.useForm();
  const [state, setState] = useState(initState);

  const loadData = async () => {
    const res = await queryRule();
    if (res.code === 0) {
      const { data } = res;
      const ans = fenToYuan(data, ['pack', 'tableware'])
      setState({
        detail: ans,
      });
    }
  };

  useEffect(() => {
    loadData();
    console.log(loadData);
  }, []);

  const onFinish = async (values: any) => {
    const { code } = await updateRule(deleteNullOrUndefinedField(values));
    if (code === 0) {
      message.success('更新成功');
    }
  };

  const { detail } = state;

  form.setFieldsValue(detail);

  return (
    <PageHeaderWrapper>
      <div className="cardBody">
        <Tabs defaultActiveKey="1">
          <TabPane tab="店铺设置" key="1">
            <Form {...layout} form={form} onFinish={onFinish}>
              <Form.Item name={['name']} label="店铺名称">
                <Input />
              </Form.Item>
              <Form.Item
                name={['type']}
                label="店铺类型"
              >
                <Select
                  placeholder="请选择店铺类型"
                >
                  {
                    Object.keys(SHOP_TYPE).map(it => (
                      <Option value={it}>{SHOP_TYPE[it]}</Option>
                    ))
                  }
                </Select>
              </Form.Item>
              <Form.Item name={['phone']} label="联系方式">
                <Input />
              </Form.Item>
              <Form.Item name={['address']} label="商家地址">
                <Input />
              </Form.Item>
              <Form.Item name={['about']} label="关于我们">
                <Input.TextArea
                  style={{ height: 250 }}
                />
              </Form.Item>
              <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 2 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
          <TabPane tab="支付设置" key="2">
            <Form {...layout} form={form} onFinish={onFinish}>
              <Form.Item name={['appid']} label="小程序ID（appid）">
                <Input />
              </Form.Item>
              <Form.Item name={['secret']} label="小程序密钥">
                <Input />
              </Form.Item>
              <Form.Item name={['mchid']} label="商户号">
                <Input />
              </Form.Item>
              <Form.Item name={['partner_key']} label="支付密钥">
                <Input />
              </Form.Item>
              <Form.Item name={['pay_tips']} label="支付提示">
                <Input.TextArea />
              </Form.Item>
              <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 2 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
          <TabPane tab="飞蛾打印机" key="3">
            <Form {...layout} form={form}>
              <Form.Item name={['fei_sn']} label="打印机编号">
                <Input />
              </Form.Item>
            </Form>
          </TabPane>
          <TabPane tab="费用配置" key="4">
            <Form {...layout} form={form} onFinish={onFinish}>
              <Form.Item name={['tableware']} label="餐具/人">
                <Input min={0} max={10} step={0.1} />
              </Form.Item>
              <Form.Item name={['pack']} label="打包费/个">
                <Input min={0} max={10} step={0.1} />
              </Form.Item>
              <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 2 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </div>
    </PageHeaderWrapper>
  );
};

export default ConfigSite;
